<template>
    <div class="navbar">
        <!-- inheritAttrs: false禁用透传至根节点navbar后,v-bind="$attrs"可以将父组件的原生属性或者原生事件透传至此button -->
        <button v-bind="$attrs" @click="handleClick">展开/折叠侧边栏</button>
        <div>vue3的单文件navbar</div>
    </div>
</template>

<script>

export default {
    // 禁用透传:可以禁止透传到根节点
    inheritAttrs: false,
    methods: {
        handleClick() {
            console.log("navbar-click");
        }
    }
}

</script>

<style scoped>
.navbar {
    height: 50px;
}

div {
    background: grey;
}
</style>